<template>
  <div class="app-container home">
    <div class="home-lt">
      <div id="amap"></div>
    </div>
    <div class="home-rt">
      <!--      <div class="home-time">2023年12月02日 09:21</div>-->
      <!--      <div class="home-panel">-->
      <!--        <div class="item">-->
      <!--          <div class="item-label">客户数</div>-->
      <!--          <div class="item-value">0</div>-->
      <!--        </div>-->
      <!--        <div class="item">-->
      <!--          <div class="item-label">项目数</div>-->
      <!--          <div class="item-value">0</div>-->
      <!--        </div>-->
      <!--        <div class="item">-->
      <!--          <div class="item-label">执勤点</div>-->
      <!--          <div class="item-value">0</div>-->
      <!--        </div>-->
      <!--        <div class="item">-->
      <!--          <div class="item-label">保安数</div>-->
      <!--          <div class="item-value">0</div>-->
      <!--        </div>-->
      <!--      </div>-->
      <div class="home-search">
        <div class="home-search__title">执勤点查询</div>
        <div class="home-search__form">
          <el-form :model="queryParams" ref="queryForm" size="small">
            <el-form-item prop="positonName">
              <el-input
                v-model="queryParams.positonName"
                placeholder="搜索执勤点名称"
                class="w100"
                clearable
                @keyup.enter.native="handleQuery"
              >
                <i
                  class="el-icon-search el-input__icon"
                  slot="suffix"
                  @click="handleQuery"
                >
                </i>
              </el-input>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div class="home-sort">
        <div class="item active" v-for="(item, index) in pointlist" :key="index" @click="mapClick(item)">
          <div class="item-title">
            <em>{{ index + 1 }}</em>{{ item.name }}
          </div>
          <div class="item-process">
            驻点{{ item.number ? item.number : '无' }}人
            <!--            <el-progress-->
            <!--              :percentage="50"-->
            <!--              :show-text="false"-->
            <!--              color="#FFF"-->
            <!--              define-back-color="#B9B9B9"-->
            <!--            ></el-progress>-->
          </div>
        </div>
      </div>
    </div>
    <homeIndex :visible.sync="showPointDetail" :pointId="pointId"></homeIndex>
  </div>
</template>

<script>
import {
  listStagnationPoint,
  getStagnationPoint
} from "@/api/system/stagnation_point";
import Vue from 'vue/dist/vue.esm.js'
import homeIndex from "@/components/homeIndex"

export default {
  name: "Index",
  dicts: ['sys_normal_disable'],
  components: {homeIndex},
  data() {
    return {
      queryParams: {},
      loading: false,
      map: null,
      pointlist: [],
      mapShipVisible: false,
      circle: null,
      pointId: 0,
      showPointDetail: false,
      polyline: null
    };
  },
  created() {
    let map = null
  },
  mounted() {
    let that = this
    this.$nextTick(() => {
      that.createMap()
    })
  },
  methods: {
    // 创建地图
    createMap() {
      const that = this
      this.aMap = new AMap.Map('amap', {
        mapStyle: "amap://styles/whitesmoke", //设置地图的显示样式
        resizeEnable: true,
        center: that.$MapCenter,
        zoom: that.$MapZoom
      })
      // this.aMap.addControl(new AMap.Scale())
      // map.addControl(new AMap.ToolBar())
      // map.add(new AMap.Marker({
      //   position: map.getCenter()
      // }));
      this.aMap.addControl(new AMap.Scale())
      this.aMap.addControl(new AMap.ToolBar())
      // 获取执勤点信息
      this.getPointList()
      // var markers = [{
      //   position: [116.205467, 39.907761]
      // }, {
      //   position: [116.368904, 39.913423]
      // }, {
      //   position: [116.305467, 39.807761]
      // }];
      // // 添加一些分布不均的点到地图上,地图上添加三个点标记，作为参照
      // markers.forEach(function (marker) {
      //   new AMap.Marker({
      //     map: that.aMap,
      //     position: marker.position,
      //     offset: new AMap.Pixel(-13, -30)
      //   })
      // })
      // this.aMap.setFitView(null, false, [150, 60, 100, 60])
    },
    getPointList() {
      let that = this
      listStagnationPoint({
        pageNum: 1,
        pageSize: 100,
        postName: undefined,
      }).then(res => {
        for (let item of res.rows) {
          this.aMap.add(that.creatMarker(item))
        }
        // this.aMap.setFitView(null, false, [150, 60, 100, 60])
        this.pointlist = res.rows
      })
    },
    creatMarker(item) {
      let that = this
      let marker_ = new AMap.Marker({
        position: [item.lon, item.lat],
        offset: new AMap.Pixel(0, 0)
      })
      marker_.ponintId = item.id
      marker_.on('click', that.openDetail);
      return marker_
    },
    openDetail(e) {
      console.log('打开详情：', e)
      let marker = e.target; // ponintId
      let pos = marker.getPosition();
      this.aMap.setCenter(pos);
      getStagnationPoint(marker.ponintId).then(res => {
        console.log('res=>', res)
        this.openInfoWindow(marker, res.data.detail);
      })
    },
    mapClick(item) {
      this.openInfoWindow(null, item)
    },
    openInfoWindow(marker, detail) {
      console.log('详情：', detail)
      let title = detail.name, content = [];
      content.push("驻点:" + detail.name);
      content.push("保安:" + (detail.number ? `驻点${detail.number}人` : '驻点无人'));
      //content.push(lg.infoSign + ":" );
      content.push("<div style='padding:10px 0;display: flex;align-items: center;'><span style='text-align:center;flex:1;cursor: pointer;color: #0000ff;text-decoration: underline;bottom:15px' class='relieve-a' @click=openDetail(" + '33' + ")>查看详细</span></div>");
      // content.push("");
      let that = this
      // console.log('list:',content.join("<br/>"))
      let infoWindow = new AMap.InfoWindow({
        isCustom: true,  //使用自定义窗体
        // content: this.createInfoWindow(title, content.join("<br/>")),
        offset: new AMap.Pixel(10, -45)
      });
      let InfoContent = Vue.extend({
        template: `<div>${that.createInfoWindow(title, content.join("<br/>")).innerHTML}</div>`,
        data() {
          return {
            shipId: detail.id
          };
        },
        methods: {
          openDetail() {
            that.openDetailWindowFn(this.shipId)
          },
          closeWindow() {
            // console.log('closeline')
            that.closeInfoWindow()
          }
        },
      });
      let component = new InfoContent().$mount();
      infoWindow.setContent(component.$el);
      if (marker) {
        infoWindow.open(this.aMap, marker.getPosition());
      } else {
        if (this.circle) {
          this.aMap.remove(this.circle);
        }
        if (this.polyline) {
          this.aMap.remove(this.polyline);
        }
        infoWindow.open(this.aMap, [detail.lon, detail.lat]);
        that.aMap.setCenter([detail.lon, detail.lat])
        that.aMap.setZoom(16)
        if (detail.rangePoints) {
          let polygonArray;
          polygonArray = JSON.parse(detail.rangePoints); //构建多边形经纬度坐标数组
          let arr = [];
          for (let j = 0; j < polygonArray.length; j++) {
            let ob = polygonArray[j];
            arr.push(new AMap.LngLat(ob.lng, ob.lat));
          }
          let zIndex = 10;
          this.polyline = new AMap.Polygon({
            map: this.map,
            path: arr,
            zIndex: zIndex,
            strokeColor: "#555",
            strokeOpacity: 0.5,
            strokeWeight: 1.5,
            // fillColor: strokeColor,
            fillOpacity: 0.35
          });
          this.polyline.setMap(this.aMap);
        } else {
          this.circle = new AMap.Circle({
            center: [detail.lon, detail.lat],
            radius: detail ? detail.distance : 0, // 半径/米
            strokeColor: "#F33", // 线颜色
            // strokeColor: this.rgb(),  // 线颜色
            zIndex: 101,
            strokeOpacity: 1, //线透明度
            strokeWeight: 1, //线粗细度
            bubble: true, // 是否将覆盖物的鼠标或touch等事件冒泡到地图上
            fillColor: "#7c7cfb", //填充颜色
            fillOpacity: 0.35 //填充透明度
          });
          this.circle.setMap(this.aMap);
        }

      }
    },
    createInfoWindow(title, content) {
      let info = document.createElement("div");
      info.className = "infowindow";

      //可以通过下面的方式修改自定义窗体的宽高
      //info.style.width = "400px";
      // 定义顶部标题
      let top = document.createElement("div");
      top.innerHTML = '<div class="info-top-header"><div>执勤点详情</div><img @click=closeWindow() src="http://webapi.amap.com/images/close2.gif" class="close-img"></div>';
      info.appendChild(top);

      // 定义中部内容
      let middle = document.createElement("div");
      middle.className = "info-middle";
      middle.style.backgroundColor = 'white';
      middle.innerHTML = content;
      info.appendChild(middle);

      // 定义底部内容
      let bottom = document.createElement("div");
      bottom.className = "info-bottom";
      bottom.style.position = 'relative';
      bottom.style.top = '0px';
      bottom.style.margin = '0 auto';
      let sharp = document.createElement("img");
      sharp.src = "http://webapi.amap.com/images/sharp.png";
      bottom.appendChild(sharp);
      info.appendChild(bottom);
      return info;
    },
    // 打开船舶详情
    openDetailWindowFn(option) {
      this.pointId = option
      this.showPointDetail = true
    },
    closeInfoWindow() {
      this.aMap.clearInfoWindow();
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.getList();
    },
    /** 查询菜单列表 */
    getList() {
      // this.loading = true;
      // listMenu(this.queryParams).then(response => {
      //   this.menuList = this.handleTree(response.data, "menuId");
      //   this.loading = false;
      // });
    },
  },
};
</script>
<style>
/*地图坐标*/
.infowindow {
  border: solid 1px silver;
  border-radius: 5px 5px 5px 5px;
}

.info-top-header {
  position: relative;
  background: none repeat scroll 0 0 #F9F9F9;
  border-bottom: 1px solid #CCC;
  border-radius: 5px 5px 0 0;
  display: flex;
  align-items: center;
  padding: 5px;
}

.info-top-header div {
  flex: 1;
}

.info-middle {
  width: 166px;
  font-size: 12px;
  padding: 6px;
  line-height: 20px;
  border-radius: 0 0 5px 5px;
  font-family: microsoft yahei;
}

.info-bottom {
  height: 0px;
  width: 100%;
  clear: both;
  text-align: center;
}

.amap-ctrl-list-layer {
  display: none;
}

.pointMap-content .el-dialog__body {
  padding: 5px;
}

.map-point-border {
  border: 1px solid rgb(0 52 198 / 80%);
  width: 33px;
  height: 33px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mapIcon {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #fff;
  background: rgb(0 52 198 / 80%);
  font-size: 22px !important;
}
</style>
<style scoped lang="scss">
.home {
  padding: 0;
  height: calc(100vh - 84px);
  display: flex;
  display: -webkit-flex;
  justify-content: space-between;

  .home-lt {
    width: calc(100% - 360px);
    height: 100%;

    #amap {
      height: 100%;
    }
  }

  .home-rt {
    width: 360px;
    padding: 10px;
    color: #000;
    font-size: 14px;
    line-height: 20px;

    .home-time {
      margin: 10px;
    }

    .home-panel {
      padding: 0 0 0 10px;
      display: flex;
      display: -webkit-flex;
      flex-wrap: wrap;

      .item {
        width: calc(50% - 10px);
        margin: 0 10px 10px 0;
        padding: 6px 8px;
        border-radius: 6px;
        background: #f3f3f3;
      }
    }
  }

  .home-search {
    text-align: left;
    margin-top: 10px;

    .home-search__title {
      font-size: 18px;
      font-weight: 400;
      margin-bottom: 8px;
    }

    .el-form-item {
      margin-bottom: 8px;

      ::v-deep .el-input__inner {
        border-radius: 2px;
        background: #f4f4f4;
        border-color: #f4f4f4;
      }
    }
  }

  .home-sort {
    margin-top: 8px;

    .item {
      margin-bottom: 8px;
      display: flex;
      flex-direction: column;
      border-bottom: 1px solid #eee;
      padding: 10px;
      cursor: pointer;

      .item-title {
        font-size: 16px;
        display: flex;
        align-items: center;
        flex: 1;
        margin-bottom: 5px;

        em {
          font-style: normal;
          display: block;
          width: 18px;
          height: 18px;
          border-radius: 3px;
          background: #ddd;
          margin-right: 5px;
          font-size: 12px;
          text-align: center;
          line-height: 18px;
        }

        .item-title__lt {
          display: flex;
          align-items: center;
        }

        .item-title__rt {
          width: 60px;
          text-align: right;
        }
      }

      .item-process {
        font-size: 14px;
        padding-left: 23px;
        color: #999;
      }

      ::v-deep .el-progress-bar__inner {
        border: 1px solid #b9b9b9;
      }
    }
  }
}
</style>
